import React from 'react';

import FormItem, { FormItemProps, } from 'antd/lib/form/FormItem';
import { IFormProps, FormContext } from './Form';
import * as  validate from './validate'
interface IFormRender extends IFormProps {
	field: string,
}
export interface IFormItemProps extends FormItemProps {
	fieldDecoratorOptions?: any,
	field: string,
	layout?: string,
	render?: any

}

export default class MyFormItem extends React.Component<IFormItemProps, any> {
	static defaultProps = {
		layout: 'horizontal', // 布局 默认垂直

	}
	renderItem = ({ form, model }: IFormProps) => {

		let { render, label, field, layout, fieldDecoratorOptions = {}, extra } = this.props;
		// console.log("myformItem-props:", this.props)
		let { getFieldDecorator } = form;
		const formItemLayout = layout === 'horizontal' ? {
			// xs:480, sm:576, md: 768, lg:992, xl:1200, xxl:1600
			labelCol: {
				xxl: { span: 4 },
				xl: { span: 4 },
				lg: { span: 4 },
				md: { span: 4 },
				sm: { span: 8 },
				xs: { span: 24 },
			},
			wrapperCol: {
				xxl: { span: 8 },
				xl: { span: 8 },
				lg: { span: 8 },
				md: { span: 8 },
				sm: { span: 12 },
				xs: { span: 24 },
			},
		} : null;

		fieldDecoratorOptions = { initialValue: model[field], ...fieldDecoratorOptions }
		console.log("formItem-fieldDecoratorOptions", fieldDecoratorOptions)
		let fieldDecorator = getFieldDecorator(field, fieldDecoratorOptions);
		return (
			<FormItem label={label} {...formItemLayout} extra={extra}>
				{fieldDecorator(render({ field, form, model }))}
			</FormItem>)
	}
	render() {
		return (
			<FormContext.Consumer>
				{this.renderItem}
			</FormContext.Consumer>)
	}
}